import React, {Component} from 'react';
import PropTypes from 'prop-types'
import { withRouter } from "react-router-dom"
import {Button, List} from 'antd-mobile';
import { NavBar, Icon, Drawer} from 'antd-mobile';

class MatchButton extends Component {

    static propTypes = {
        inf:PropTypes.object.isRequired,
        matchState:PropTypes.object.isRequired,
        matchStart:PropTypes.func.isRequired
    }
    state = {
        open: false
    }

    onOpenChange = (...args) => {
        console.log(args);
        this.setState({ open: !this.state.open });
    }
    onMatchClick() {
        this.props.history.push("/Match");
    }   
      onFriendClick() {
        this.props.history.push("/Friend");
    }  
      onQuitClick() {
        this.props.history.push("/");
      }   

    onMatchButtonClick(){
        const{inf,matchStart} = this.props
        matchStart("avc");
    }

    render(){
        const matchIconUrl = "https://www.easyicon.net/api/resizeApi.php?id=1217377&size=128";
        const friendIconUrl = "https://www.easyicon.net/api/resizeApi.php?id=1215657&size=128";
        const QuitIconUrl = "https://www.easyicon.net/api/resizeApi.php?id=1152326&size=128";
  
        const{matchState,reset} = this.props
            if(matchState.state === 2)
            return(
                <div>
                    <div>匹配失败</div>
                    <input type = 'button' value = "匹配" onClick={()=>this.onMatchButtonClick()}/>
                </div>
            )
        else if (matchState.state === 1)
        {
            this.props.history.push("/AnonymousChat");//加一个判断函数
            reset();
        }
 
        const sidebar = (<List>
            <List.Item 
            multipleLine></List.Item>
            <List.Item 
            thumb = {matchIconUrl} 
            multipleLine onClick = {()=>{this.onMatchClick()}}>匹配</List.Item>
            <List.Item 
            thumb = {friendIconUrl} 
            multipleLine onClick = {()=>{this.onFriendClick()}}>好友</List.Item>
            <List.Item 
            thumb= {QuitIconUrl} style = {{color:"blue"}}
            multipleLine onClick = {()=>{this.onQuitClick()}}>退出</List.Item>
          </List>);

    return(
        <div style = {{width:window.innerWidth,height:window.innerHeight,textAlign:'center',verticalAlign:'middle'}}>
        
          <NavBar className = "my-friend-list-bar" onLeftClick={this.onOpenChange}
                  mode="dark"
                 leftContent={[
             <Icon onClick={()=>{console.log("onleft");this.onOpenChange();}} key="0" type="ellipsis" style={{ marginRight: '16px' }} />
             ]}
          >欢迎进入流伪捷的世界！</NavBar>
        <Button style = {{top:window.innerHeight/2-100,margin:"auto auto",width: 150,height: 150, textAlign:'center',verticalAlign:'middle', whiteSpace: 'pre-wrap', fontSize:40, padding:30}} onClick={()=>this.onMatchButtonClick()} size = "lg" type = 'primary'>开始匹配</Button>
        {this.state.open == true?<Drawer
    onClick={() => {console.log("onDrawclick")}}
    className="my-drawer"
    style={{ minHeight: document.documentElement.clientHeight }}
    enableDragHandle
    contentStyle={{ color: '#A6A6A6', textAlign: 'center', paddingTop: 42 }}
    overlayStyle={{ color: '#A6A6A6'}}
    sidebar={sidebar}
    open={this.state.open}
    onOpenChange={this.onOpenChange}
    />:<br/>}
    </div>
    )
}
}


export default withRouter(MatchButton)